<template>
    <li>
        <label>
            <input :checked="todo.done" type="checkbox" @change="change(todo.id)" />
            <span>{{ todo.title }}</span>
        </label>
        <button class="btn btn-danger" @click="removeHandler(todo.id)">删除</button>
    </li>
</template>

<script>
export default {
    name: 'My-Item',
    props: ['todo', 'remove', 'change'],
    methods: {
        // 删除单个任务
        removeHandler(id) {
            if (window.confirm('确定删除吗？')) {
                this.remove(id)
            }
        }
    }
}
</script>

<style scoped>
.btn-danger {
    display: none;
}
li:hover .btn-danger {
    display: inline-block;
}
</style>
